<template>
  <div class="add-data-container">
    <a-textarea
      v-model="textarea"
      :auto-size="{ minRows: 8, maxRows: 30 }">
    </a-textarea>
    <a-button type="primary" style="margin-top: 10px" @click="changeTextarea">确定修改</a-button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      textarea: ''
    }
  },
  methods: {
    ...mapMutations([
      'changeDataList'
    ]),
    changeTextarea () {
      if (this.textarea === JSON.stringify(this.dataList)) {
        return false
      }
      if (Object.prototype.toString.call(JSON.parse(this.textarea)).slice(8, -1) === 'Array') {
        // 表示数据正确
        this.changeDataList(JSON.parse(this.textarea))
        this.$message.success('修改成功')
      } else {
        this.$message.error('请输入正确的数据格式')
      }
    }
  },
  computed: {
    ...mapState({
      'dataList': state => state.card.dataList
    })
  },
  created () {
    this.textarea = JSON.stringify(this.dataList)
  }
}
</script>
